﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat</title>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="700" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvas = document.getElementById("mycanvas"); //绘图区域
        let context = canvas.getContext("2d"); //绘图上下文
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let gPaint = new FCPaint(); //绘图对象
        gPaint.canvas = canvas;
        scaleCanvas(gPaint);
        //判断是否移动端
        gPaint.isMobile = isMobileMode();
        if (gPaint.isMobile) {
            gPaint.scaleFactorX = 2.5;
            gPaint.scaleFactorY = 2.5;
        }
        //判断主题色
        gPaint.defaultUIStyle = "light";
        addDefaultEvent(canvas, gPaint);

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        gPaint.onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
            if (view.viewName == "Button") {
                alert(view.text);
            } else if (view.viewName == "Button2") {
                alert(view.text);
            } else if (view.viewName == "Button3") {
                alert(view.text);
            } else if (view.viewName == "Button4") {
                alert(view.text);
            }
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaint = function (view, paint, clipRect) {
            if (view.viewName == "Button4") {
                paint.fillRect("rgb(255,0,0)", 0, 0, view.size.cx, view.size.cy);
            } else {
                onPaintDefault(view, paint, clipRect);
            }
        };

        /*
         * 重置大小
         */
        let resizeAll = function () {
            try {
                canvas.width = document.documentElement.clientWidth;
                canvas.height = document.documentElement.clientHeight;
                scaleCanvas(gPaint);
                updateViewDefault(gPaint.views);
            } catch (err) {
                //alert(err);
            }
            invalidate(gPaint);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };

        //解析加载XML
        let xml = `<?xml version="1.0" encoding="utf-8"?>
        <html xmlns="facecat">
          <head>
          </head>
          <body>
            <div dock="fill" type="tab" selectedindex="0">
              <div name="TabPage" text="可视化生成" type="tabpage">
                <input type="button" name="Button" text="取消" location="35,50" size="100,20" backcolor="rgb(170,178,189)" cornerradius="4" textcolor="rgb(255,255,255)" />
                <input type="button" name="Button2" text="确认" location="32,92" size="130,38" font="Default,16.0" backcolor="rgb(59,174,218)" bordercolor="rgb(255,0,0)" textcolor="rgb(255,255,255)" />
                <input type="button" name="Button3" text="查询" location="33,155" size="100,42" textcolor="rgb(0,0,5)" backcolor="rgb(140,192,81)" font="Default,14.0" cornerradius="10" />
              </div>
              <div name="TabPage2" text="代码创建" type="tabpage" />
              <div name="TabPage3" text="自定义重绘" type="tabpage">
                <input type="custom" cid="mybutton" name="Button4" text="删除" location="74,84" size="100,40" />
              </div>
            </div>
          </body>
        </html>
        `;
        renderFaceCat(gPaint, xml);
        //获取第二页
        let tabPage = findViewByName("TabPage2", gPaint.views);
        let button = new FCButton();
        button.location = new FCPoint(100, 100);
        button.size = new FCSize(100, 20);
        button.backColor = "rgb(255,255,255)";
        button.textColor = "rgb(0,0,0)";
        button.borderColor = "rgb(150,150,150)";
        addViewToParent(button, tabPage);
        button.text = "确定";
    </script>
</body>
</html>
